<template>
  <div class="contact-page">
    <NavBar />
    
    <!-- 页面标题 -->
    <section class="page-header relative overflow-hidden py-24 bg-gradient-to-r from-blue-600 via-blue-500 to-indigo-700 text-white">
      <!-- 装饰元素 -->
      <div class="absolute top-0 left-0 w-full h-full overflow-hidden">
        <div class="absolute -top-10 -left-10 w-40 h-40 rounded-full bg-white blur-3xl opacity-30 animate-pulse-slow"></div>
        <div class="absolute bottom-10 right-10 w-60 h-60 rounded-full bg-white blur-3xl opacity-30 animate-pulse-slow-delay"></div>
        <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-80 h-80 rounded-full bg-indigo-400/20 blur-3xl"></div>
        <!-- 网格装饰 -->
        <div class="absolute inset-0 bg-grid-white-blue/[0.95] [mask-image:radial-gradient(ellipse_at_center,white,transparent_75%)]"></div>
      </div>
      <div class="container mx-auto px-4 text-center relative z-10">
        <h1 class="text-[clamp(2.5rem,5vw,4rem)] font-bold mb-4 tracking-tight animate-fade-in-up">
          {{ $t('nav.contact') }}
        </h1>
        <p class="text-[clamp(1rem,2vw,1.5rem)] max-w-2xl mx-auto opacity-90 animate-fade-in-up delay-100">
          欢迎联系我们，我们将竭诚为您服务
        </p>
        <!-- 滚动指示 -->
        <div class="mt-8 animate-bounce">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 mx-auto opacity-80" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3" />
          </svg>
        </div>
      </div>
    </section>

    <!-- 联系信息 -->
    <section class="contact-info py-20" ref="contactInfoRef">
      <div class="container mx-auto px-4">
        <div class="grid grid-cols-1 md:grid-cols-3 gap-4 md:gap-8">
          <div class="contact-item bg-white rounded-xl shadow-md p-6 md:p-8 text-center transform transition-all duration-500 hover:shadow-xl hover:-translate-y-2 relative group overflow-hidden">
            <!-- 装饰元素 -->
            <div class="absolute inset-0 bg-gradient-to-br from-blue-50 to-indigo-50 opacity-0 group-hover:opacity-100 transition-opacity duration-700 z-0 pointer-events-none"></div>
            <div class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-blue-500 to-indigo-600"></div>
            
            <div class="contact-icon bg-gradient-to-br from-blue-100 to-indigo-100 text-blue-600 w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-6 shadow-sm transition-all duration-500 group-hover:bg-gradient-to-r group-hover:from-blue-500 group-hover:to-indigo-600 group-hover:text-white group-hover:scale-110 relative z-10">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 transition-transform duration-500 group-hover:scale-110" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
              </svg>
            </div>
            <h3 class="text-xl font-bold mb-3 text-gray-800 transition-colors duration-300 group-hover:text-blue-600 relative z-10">公司地址</h3>
            <p class="text-gray-600 transition-colors duration-300 group-hover:text-gray-700 relative z-10 line-clamp-2 break-words">深圳市光明区公明街道上村社区长春北路202号805</p>
          </div>
          
          <div class="contact-item bg-white rounded-xl shadow-md p-8 text-center transform transition-all duration-500 hover:shadow-xl hover:-translate-y-2 relative group overflow-hidden">
            <!-- 装饰元素 -->
            <div class="absolute inset-0 bg-gradient-to-br from-blue-50 to-indigo-50 opacity-0 group-hover:opacity-100 transition-opacity duration-700 z-0 pointer-events-none"></div>
            <div class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-blue-500 to-indigo-600"></div>
            
            <div class="contact-icon bg-gradient-to-br from-blue-100 to-indigo-100 text-blue-600 w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-6 shadow-sm transition-all duration-500 group-hover:bg-gradient-to-r group-hover:from-blue-500 group-hover:to-indigo-600 group-hover:text-white group-hover:scale-110 relative z-10">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 transition-transform duration-500 group-hover:scale-110" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
              </svg>
            </div>
            <h3 class="text-xl font-bold mb-3 text-gray-800 transition-colors duration-300 group-hover:text-blue-600 relative z-10">联系电话</h3>
            <p class="text-gray-600 transition-colors duration-300 group-hover:text-gray-700 relative z-10 break-words">19928872570</p>
          </div>
          
          <div class="contact-item bg-white rounded-xl shadow-md p-8 text-center transform transition-all duration-500 hover:shadow-xl hover:-translate-y-2 relative group overflow-hidden">
            <!-- 装饰元素 -->
            <div class="absolute inset-0 bg-gradient-to-br from-blue-50 to-indigo-50 opacity-0 group-hover:opacity-100 transition-opacity duration-700 z-0 pointer-events-none"></div>
            <div class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-blue-500 to-indigo-600"></div>
            
            <div class="contact-icon bg-gradient-to-br from-blue-100 to-indigo-100 text-blue-600 w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-6 shadow-sm transition-all duration-500 group-hover:bg-gradient-to-r group-hover:from-blue-500 group-hover:to-indigo-600 group-hover:text-white group-hover:scale-110 relative z-10">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 transition-transform duration-500 group-hover:scale-110" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
              </svg>
            </div>
            <h3 class="text-xl font-bold mb-3 text-gray-800 transition-colors duration-300 group-hover:text-blue-600 relative z-10">电子邮箱</h3>
            <p class="text-gray-600 transition-colors duration-300 group-hover:text-gray-700 relative z-10 break-words">593597059@qq.com</p>
          </div>
        </div>
      </div>
    </section>

    <!-- 联系表单 -->
    <section class="contact-form py-20 bg-gray-50" ref="contactFormRef">
      <div class="container mx-auto px-4">
        <div class="max-w-5xl mx-auto bg-white rounded-2xl shadow-xl overflow-hidden transition-all duration-700">
          <div class="grid grid-cols-1 md:grid-cols-2">
            <div class="form-info bg-gradient-to-br from-blue-600 via-blue-500 to-indigo-700 text-white p-6 md:p-10 relative overflow-hidden">
              <!-- 装饰元素 -->
              <div class="absolute inset-0 overflow-hidden">
                <div class="absolute top-0 right-0 w-40 h-40 bg-white/10 rounded-full blur-2xl animate-pulse-slow"></div>
                <div class="absolute bottom-0 left-0 w-60 h-60 bg-white/10 rounded-full blur-3xl animate-pulse-slow-delay"></div>
                <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-80 h-80 rounded-full bg-indigo-400/20 blur-3xl"></div>
                <!-- 网格装饰 -->
                <div class="absolute inset-0 bg-grid-white-blue/[0.95] [mask-image:radial-gradient(ellipse_at_center,white,transparent_75%)]"></div>
              </div>
              
              <div class="relative z-10">
                <h3 class="text-xl md:text-2xl font-bold mb-4 md:mb-5 tracking-tight">联系我们</h3>
                <p class="mb-6 md:mb-8 opacity-90 leading-relaxed text-sm md:text-base">如有任何疑问或需求，请填写右侧表单，我们将尽快与您联系。</p>
                
                <div class="space-y-5">
                  <div class="flex items-center group">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-4 flex-shrink-0 transition-all duration-300 group-hover:scale-110" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
                    </svg>
                    <span>周一至周五: 9:00 - 18:00</span>
                  </div>
                  <div class="flex items-center group">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-4 flex-shrink-0 transition-all duration-300 group-hover:scale-110" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9" />
                    </svg>
                    <span>节假日休息</span>
                  </div>
                </div>
                
                <div class="mt-10">
                  <h4 class="font-bold mb-4 text-lg">关注我们</h4>
                  <div class="flex space-x-4">
                    <a href="#" class="bg-white/20 w-12 h-12 rounded-full flex items-center justify-center hover:bg-white/30 transition-all duration-500 transform hover:scale-110">
                      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24">
                        <path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"/>
                      </svg>
                    </a>
                    <a href="#" class="bg-white/20 w-12 h-12 rounded-full flex items-center justify-center hover:bg-white/30 transition-all duration-500 transform hover:scale-110">
                      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24">
                        <path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/>
                      </svg>
                    </a>
                    <a href="#" class="bg-white/20 w-12 h-12 rounded-full flex items-center justify-center hover:bg-white/30 transition-all duration-500 transform hover:scale-110">
                      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24">
                        <path d="M19.615 3.184c-3.604-.246-11.631-.245-15.23 0-3.897.266-4.356 2.62-4.385 8.816.029 6.185.484 8.549 4.385 8.816 3.6.245 11.626.246 15.23 0 3.897-.266 4.356-2.62 4.385-8.816-.029-6.185-.484-8.549-4.385-8.816zm-10.615 12.816v-8l8 3.993-8 4.007z"/>
                      </svg>
                    </a>
                  </div>
                </div>
              </div>
            </div>
            
            <div class="p-6 md:p-10">
              <h3 class="text-xl md:text-2xl font-bold mb-6 md:mb-8 text-gray-800 bg-clip-text text-transparent bg-gradient-to-r from-gray-900 to-gray-700">留言咨询</h3>
              <el-form :model="formData" :rules="rules" ref="formRef" :label-width="isMobile ? '70px' : '80px'">
                <el-form-item label="姓名" prop="name" class="mb-5">
                  <el-input 
                    v-model="formData.name" 
                    placeholder="请输入您的姓名"
                    :class="{ 'custom-input': true }"
                  ></el-input>
                </el-form-item>
                <el-form-item label="电话" prop="phone" class="mb-5">
                  <el-input 
                    v-model="formData.phone" 
                    placeholder="请输入您的电话"
                    :class="{ 'custom-input': true }"
                  ></el-input>
                </el-form-item>
                <el-form-item label="邮箱" prop="email" class="mb-5">
                  <el-input 
                    v-model="formData.email" 
                    placeholder="请输入您的邮箱"
                    :class="{ 'custom-input': true }"
                  ></el-input>
                </el-form-item>
                <el-form-item label="主题" prop="subject" class="mb-5">
                  <el-select 
                    v-model="formData.subject" 
                    placeholder="请选择咨询主题" 
                    style="width: 100%;"
                    :popper-class="'custom-select'"
                  >
                    <el-option label="产品咨询" value="product"></el-option>
                    <el-option label="技术支持" value="tech"></el-option>
                    <el-option label="合作洽谈" value="cooperation"></el-option>
                    <el-option label="其他问题" value="other"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="留言内容" prop="message" class="mb-8">
                  <el-input 
                    v-model="formData.message" 
                    type="textarea" 
                    :rows="4" 
                    placeholder="请输入您的留言内容"
                    :class="{ 'custom-input': true }"
                  ></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button 
                    type="primary" 
                    @click="submitForm"
                    class="custom-submit-btn"
                  >
                    提交留言
                  </el-button>
                  <el-button 
                    @click="resetForm" 
                    class="ml-4 transition-all duration-300 hover:bg-gray-100"
                  >
                    重置
                  </el-button>
                </el-form-item>
              </el-form>
            </div>
          </div>
        </div>
      </div>
    </section>

    

    <Footer />
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, onUnmounted } from 'vue'
import NavBar from '@/components/NavBar.vue'
import Footer from '@/components/Footer.vue'
import { ElMessage } from 'element-plus'
import type { FormInstance, FormRules } from 'element-plus'

// 表单相关
const formRef = ref<FormInstance>()

// 检测移动端
const isMobile = ref(window.innerWidth < 768)
window.addEventListener('resize', () => {
  isMobile.value = window.innerWidth < 768
})

const formData = reactive({
  name: '',
  phone: '',
  email: '',
  subject: '',
  message: ''
})

const rules = reactive<FormRules>({
  name: [
    { required: true, message: '请输入您的姓名', trigger: 'blur' },
    { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
  ],
  phone: [
    { required: true, message: '请输入您的电话', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
  ],
  email: [
    { required: true, message: '请输入您的邮箱', trigger: 'blur' },
    { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
  ],
  subject: [
    { required: true, message: '请选择咨询主题', trigger: 'change' }
  ],
  message: [
    { required: true, message: '请输入留言内容', trigger: 'blur' },
    { min: 10, max: 500, message: '长度在 10 到 500 个字符', trigger: 'blur' }
  ]
})

const submitForm = async () => {
  if (!formRef.value) return
  try {
    await formRef.value.validate()
    // 模拟提交表单
    window.setTimeout(() => {
      ElMessage.success('留言提交成功，我们将尽快与您联系！')
      resetForm()
    }, 1000)
  } catch (error) {
    console.log('表单验证失败', error)
  }
}

const resetForm = () => {
  if (!formRef.value) return
  formRef.value.resetFields()
}

// 滚动动画相关
const contactInfoRef = ref<HTMLElement>()
const contactFormRef = ref<HTMLElement>()

// 地图已移除

// 检测元素是否在视口中
const isInViewport = (element: HTMLElement) => {
  const rect = element.getBoundingClientRect()
  return (
    rect.top <= window.innerHeight * 0.8 &&
    rect.bottom >= 0
  )
}


// 处理滚动事件，添加动画效果
const handleScroll = () => {
  // 联系信息区块动画
  if (contactInfoRef.value) {
    const items = contactInfoRef.value.querySelectorAll('.contact-item')
    items.forEach((item, index) => {
      if (isInViewport(item as HTMLElement)) {
        window.setTimeout(() => {
          (item as HTMLElement).style.opacity = '1';
          (item as HTMLElement).style.transform = 'translateY(0)';
          (item as HTMLElement).style.transitionDelay = `${index * 150}ms`
        }, 100)
      }
    })
  }
  
  // 联系表单区块动画
  if (contactFormRef.value && isInViewport(contactFormRef.value)) {
    contactFormRef.value.style.opacity = '1'
    contactFormRef.value.style.transform = 'translateY(0)'
    contactFormRef.value.style.transition = 'opacity 0.7s ease, transform 0.7s ease'
  }
  
  // 地图已移除
}

onMounted(() => {
  // 初始化元素样式
  if (contactInfoRef.value) {
    const items = contactInfoRef.value.querySelectorAll('.contact-item')
    items.forEach((item, index) => {
      (item as HTMLElement).style.transition = 'opacity 0.6s ease, transform 0.6s ease';
      (item as HTMLElement).style.transform = 'translateY(20px)';
    })
  }
  
  // 地图已移除
  
  window.addEventListener('scroll', handleScroll)
  // 初始检查一次，确保页面加载时可见的元素也能触发动画
  window.setTimeout(handleScroll, 100)
  // 地图已移除
 })

onUnmounted(() => {
  window.removeEventListener('scroll', handleScroll)
})
</script>

<style scoped>
.contact-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* 表单样式优化 */
:deep(.custom-input) {
  border-radius: 8px;
  transition: all 0.3s ease;
}

:deep(.custom-input:hover) {
  border-color: #409eff;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.1);
}

:deep(.custom-input:focus) {
  border-color: #409eff;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
}

:deep(.custom-select .el-input__wrapper) {
  border-radius: 8px;
}

.custom-submit-btn {
  background: linear-gradient(135deg, #409eff, #667eea);
  border: none;
  padding: 12px 24px;
  font-size: 16px;
  border-radius: 8px;
  transition: all 0.5s ease;
  position: relative;
  overflow: hidden;
}

.custom-submit-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  transition: all 0.5s ease;
}

.custom-submit-btn:hover {
  background: linear-gradient(135deg, #667eea, #764ba2);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}

.custom-submit-btn:hover::before {
  left: 100%;
}

/* 网格装饰 */
.bg-grid-white {
  background-image: linear-gradient(#ffffff 1px, transparent 1px),
                    linear-gradient(to right, #ffffff 1px, transparent 1px);
  background-size: 20px 20px;
}

/* 网格装饰带蓝色背景 */
.bg-grid-white-blue {
  background-color: rgba(59, 130, 246, 0.1); /* bg-blue-500/10 的实际颜色值 */
  background-image: linear-gradient(#ffffff 1px, transparent 1px),
                    linear-gradient(to right, #ffffff 1px, transparent 1px);
  background-size: 20px 20px;
}

/* 动画类 */
.animate-fade-in-up {
  animation: fadeInUp 0.8s ease forwards;
}

.animate-bounce {
  animation: bounce 2s infinite;
}

.animate-pulse-slow {
  animation: pulse 6s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.animate-pulse-slow-delay {
  animation: pulse 6s cubic-bezier(0.4, 0, 0.6, 1) 2s infinite;
}

.delay-100 {
  animation-delay: 0.1s;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes bounce {
  0%, 20%, 53%, 80%, 100% {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transform: translate3d(0, 0, 0);
  }
  40%, 43% {
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    transform: translate3d(0, -8px, 0);
  }
  70% {
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    transform: translate3d(0, -4px, 0);
  }
  90% {
    transform: translate3d(0, -2px, 0);
  }
}

/* 动画旋转 */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.animate-spin {
  animation: spin 1s linear infinite;
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}
</style>